<template>
  <div class="right">
    <div class="head">
      <span :class="active == 1 ? 'active' : ''" @click="active = 1">
        局内角色权限配置
      </span>
      <!-- <span :class="active == 2 ? 'active' : ''" @click="active = 2">
        新增管理员角色
      </span> -->
    </div>
    <div class="content-box" v-if="active == 1">
      <div
        class="add-btn"
        @click="$router.push({ name: 'systemgljueseadd', query: { flag: 1 } })"
      >
        新增角色
      </div>
      <div class="table-box">
        <el-table
          key="list"
          :data="listDataRoles"
          style="width: 1250px;margin-bottom: 20px;"
          height="633"
          border
          stripe
          :header-cell-style="{
            textAlign: 'center',
          }"
          :cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column prop="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="three_role" label="三级角色">
          </el-table-column>
          <el-table-column label="权限" width="240">
            <template slot-scope="scope">
              <div>
                <span
                  class="btn-span btn-add  btn-m-r-10"
                  @click="
                    $router.push({
                      name: 'systemgljueseadd',
                      query: { flag: 3, id: scope.row.id },
                    })
                  "
                >
                  查 看
                </span>
                <span
                  v-if="scope.row.id > 31"
                  class="btn-span btn-bianji  btn-m-r-10"
                  @click="
                    $router.push({
                      name: 'systemgljueseadd',
                      query: { flag: 2, id: scope.row.id },
                    })
                  "
                >
                  编 辑
                </span>
                <span
                  v-if="scope.row.id > 31"
                  class="btn-span btn-del"
                  @click="showDelDialog(scope.row.id)"
                  >删 除</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content-box" v-if="active == 2">
      <div class="add-btn" @click="showAdd = true">
        新增管理员
      </div>
      <div class="table-box">
        <!-- height="633" -->
        <el-table
          key="role"
          :data="roleList"
          style="width: 1250px;margin-bottom: 20px;"
          border
          stripe
          :header-cell-style="{
            textAlign: 'center',
          }"
          :cell-style="{
            textAlign: 'center',
          }"
        >
          <el-table-column prop="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="职务角色"> </el-table-column>
          <el-table-column prop="info" label="说明"> </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      class="del-dialog"
      title="删除提示"
      :visible.sync="showDel"
      @close="closeDel"
    >
      <div class="del-content">
        确定删除此角色？
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeDel">
          取消
        </div>
        <div class="qd" @click="deleteRole">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog title="新增下级部门" :visible.sync="showAdd" @close="closeAdd">
      <div class="add-bm">
        <p>
          <span>账号：</span>
          <el-input
            v-model="account"
            placeholder="请输入"
            autocomplete="new-password"
          ></el-input>
        </p>
        <p>
          <span>密码</span>
          <el-input
            v-model="password"
            type="password"
            placeholder="请输入"
            autocomplete="new-password"
          ></el-input>
        </p>
        <p>
          <span>角色分配</span>
          <el-select placeholder="管理员" v-model="role">
            <el-option label="超级管理员" value="1"></el-option>
            <el-option label="系统运维员" value="2"></el-option>
          </el-select>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeAdd">
          取消
        </div>
        <div class="qd" @click="addManager">
          确 定
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetFixedRole,
  roles,
  addRole,
  updateRole,
  deleteRole,
  addManager,
  getRole,
  deleteRole2,
} from "@/api/system";

export default {
  data() {
    return {
      active: 1,
      showDel: false,
      showAdd: false,

      listDataRoles: [],
      roleList: [
        { index: 1, name: "超级管理员", info: "拥有所有权限" },
        { index: 2, name: "系统运维员", info: "组织架构管理、注册用户管理" },
      ],
      tier: "",
      check1: 0,
      check2: 0,
      check3: 0,
      check4: 0,
      check5: 0,
      role_name: "", // 角色名
      rolev: "", //   权值
      info: "", //  角色描述
      account: "", //")  # 账户名-字母开头
      password: "", //")  # 密码
      role: "", //")  # 角色 1超级管理员，2系统运维员
      delId: "",
    };
  },
  created() {
    this.GetFixedRole();

    // this.getroles();
  },
  methods: {
    async GetFixedRole() {
      let res = await GetFixedRole();
      this.listDataRoles = res
        .filter((item, index) => {
          return item.id > 43;
        })
        .map((item, index) => {
          item.index = index + 1;
          return item;
        });
    },
    showDelDialog(id) {
      this.delId = id;
      this.showDel = true;
    },
    closeDel() {
      this.delId = "";
      this.showDel = false;
    },
    closeAdd() {
      this.showAdd = false;
    },

    async deleteRole() {
      const res = await deleteRole2({
        id: this.delId,
      });

      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.closeDel();

        this.GetFixedRole();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    async addManager() {
      const res = await addManager({
        account: this.account, //")  # 账户名-字母开头
        password: this.password, //")  # 密码
        role: this.role, //")  # 角色 1超级管理员，2系统运维员
      });
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.closeAdd();
        this.getroles();
        1;
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },

    async getroles() {
      const res = await roles();
      this.listDataRoles = res.map((item, index) => {
        item.index = index + 1;
        return item;
      });
    },

    // 下面没用到
    async addRole() {
      if (this.check1 == true) {
        var check1 = 1;
      } else {
        var check1 = 0;
      }
      if (this.check2 == true) {
        var check2 = 1;
      } else {
        var check2 = 0;
      }
      if (this.check3 == true) {
        var check3 = 1;
      } else {
        var check3 = 0;
      }
      if (this.check4 == true) {
        var check4 = 1;
      } else {
        var check4 = 0;
      }
      if (this.check5 == true) {
        var check5 = 1;
      } else {
        var check5 = 0;
      }
      var rolev = this.tier + check1 + check2 + check3 + check4 + check5;
      const res = await addRole({
        role_name: this.role_name, // 角色名
        rolev: rolev, //   权值
        info: this.info, //  角色描述
      });
      let refName2 = "popnew";
      this.$refs[refName2].doClose();
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.getroles();
        this.tier = "";
        this.check1 = 0;
        this.check2 = 0;
        this.check3 = 0;
        this.check4 = 0;
        this.check5 = 0;
        this.info = "";
        this.role_name = "";
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    async updateRole(id) {
      if (this.check1 == true) {
        var check1 = 1;
      } else {
        var check1 = 0;
      }
      if (this.check2 == true) {
        var check2 = 1;
      } else {
        var check2 = 0;
      }
      if (this.check3 == true) {
        var check3 = 1;
      } else {
        var check3 = 0;
      }
      if (this.check4 == true) {
        var check4 = 1;
      } else {
        var check4 = 0;
      }
      if (this.check5 == true) {
        var check5 = 1;
      } else {
        var check5 = 0;
      }
      var rolev = this.tier + check1 + check2 + check3 + check4 + check5;
      const res = await updateRole({
        id: id,
        role_name: this.role_name, // 角色名
        rolev: rolev, //   权值
        info: this.info, //  角色描述
      });
      let refName2 = "popbj" + id;
      this.$refs[refName2][0].doClose();
      if (res.code == 0) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.getroles();
        this.tier = "";
        this.check1 = 0;
        this.check2 = 0;
        this.check3 = 0;
        this.check4 = 0;
        this.check5 = 0;
        this.info = "";
        this.role_name = "";
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
    async getRole(id) {
      const res = await getRole({
        id: id,
      });
      this.role_name = res.name;
      var arr = res.rolev.split("");
      this.tier = arr[0];
      if (arr[1] == 1) {
        this.check1 = true;
      } else {
        this.check1 = false;
      }
      if (arr[2] == 1) {
        this.check2 = true;
      } else {
        this.check2 = false;
      }
      if (arr[3] == 1) {
        this.check3 = true;
      } else {
        this.check3 = false;
      }
      if (arr[4] == 1) {
        this.check4 = true;
      } else {
        this.check4 = false;
      }
      if (arr[5] == 1) {
        this.check5 = true;
      } else {
        this.check5 = false;
      }
    },
    hidedata() {
      this.role_name = "";
      this.tier = "";
      this.check1 = "";
      this.check2 = "";
      this.check3 = "";
      this.check4 = "";
      this.check5 = "";
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-box {
    padding: 0 20px;
    height: calc(100% - 80px);
    overflow: hidden;
    .add-btn {
      margin: 30px 0;
      width: 120px;
      height: 38px;
      line-height: 38px;
      background: #f89718;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
      cursor: default;
    }
  }
}
.head {
  padding-left: 20px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
}

/deep/ .el-table--border th.el-table__cell {
  padding: 0;
  height: 48px;
  background: #f5f6f7;
  border-right: 4px solid #fff;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

/deep/ .el-table [class*="el-table__row--level"] .el-table__expand-icon {
  display: none;
}
/deep/ .el-table__indent {
  display: none;
}
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
  padding: 0;
  height: 48px;
  line-height: 48px;
  border: none;
  background: #f9fafb;
  border-bottom: 4px solid #fff;
}
/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f5f6f7;
}
/deep/ .el-table--border {
  border: none;
}
.btn-span {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 4px;
  vertical-align: middle;
  cursor: default;
}
.btn-bianji {
  width: 50px;
  background: #5889dc;
}
.btn-add {
  width: 50px;
  background: #f89718;
}
.btn-del {
  width: 50px;
  background: #f15847;
}
.btn-m-r-10 {
  margin-right: 10px;
}

/deep/ .el-dialog {
  padding: 0 46px;
  width: 720px !important;
  height: 580px !important;
  top: 50%;
  margin-top: -290px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
/deep/ .del-dialog .el-dialog {
  padding: 0 46px;
  width: 720px !important;
  height: 300px !important;
  top: 50%;
  margin-top: -150px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
.del-content {
  font-size: 22px;
}
.add-bm {
  padding: 20px 52px;
  p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 54px;
    line-height: 54px;
    span {
      font-size: 18px;
      color: #333333;
    }
  }
  /deep/ .el-input,
  /deep/ .el-input__inner {
    width: 350px;
    height: 54px;
    background: #f7f7f7;
    border-radius: 8px;
    border: 0;
    font-size: 18px;
    color: #333333;
  }
}
/deep/.add-dialog .el-dialog {
  padding: 0 120px;
  width: 1350px !important;
  height: 580px !important;
  top: 50%;
  margin-top: -290px !important;
}
/deep/ .add-dialog .el-dialog__body {
  padding: 50px 0;
}
/deep/ .add-content .flex-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  p > span {
    display: inline-block;
    width: 140px;
    text-align: left;
    font-size: 18px;
    color: #333333;
  }
  .el-input {
    width: 350px;
    height: 54px;
    background: #f7f7f7;
    border-radius: 8px;
  }
  .el-input__inner {
    width: 350px;
    height: 54px;
    background: #f7f7f7;
    border-radius: 8px;
    border: none;
    font-size: 18px;
    color: #333333;
  }
  .el-form-item__label {
    width: 130px !important;
    font-size: 18px;
    color: rgba(51, 51, 51, 1);
  }
  .el-form-item__content {
    margin-left: 130px !important;
  }
  // & > div {
  //   flex: 0 0 33%;
  // }
}
.tipss {
  text-align: right;
  font-size: 14px;
  color: #999999;
  line-height: 33px;
  span {
    color: #ff0000;
  }
}
/deep/ .el-dialog__header {
  padding-top: 30px;
  height: 100px;
  line-height: 70px;
  border-bottom: 1px dashed #ddd;

  .el-dialog__title {
    font-size: 30px;
    font-weight: bold;
    color: #446db3;
  }
}

/deep/.el-dialog__body {
  padding: 30px 20px;
  .tips {
    font-size: 24px;
  }
  li {
    margin: 0 auto;
    // span {
    //   width: 80px !important;
    //   padding: 0 !important;
    //   font-size: 18px;
    //   color: #333333;
    // }
    .el-input__inner {
      width: 350px;
      height: 54px;
      background: #f7f7f7 !important;
      border-radius: 8px;
      border: none !important;
    }
  }
}
/deep/.dialog-footer {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  .qx {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    text-align: center;
    cursor: default;
  }
  .qd {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    background: #446db3;
    box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    cursor: default;
  }
}
/deep/ .el-icon-close:before {
  content: "";
  display: block;
  width: 21px;
  height: 20px;
  background: url("~@img/system/icon-close.png");
}
/deep/.el-dialog__headerbtn {
  right: 50px;
}
/deep/ .el-table__header-wrapper {
  margin-bottom: 4px;
}
/deep/ .el-table::before,
/deep/ .el-table::after {
  width: 0 !important;
}
/deep/ .el-table--border::after,
/deep/ .el-table--group::after {
  width: 0 !important;
}
/deep/ .el-table__row td:last-of-type {
  border-right: 4px solid #fff !important;
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-table--border {
    height: 530px !important;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-table--border {
    height: 482px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .el-table--border {
    height: 434px !important;
  }
}
</style>
